<template>
  <div class="smart-operation">
    <BottomArrow />
    <Solution :titles="solution.titles" :theme="solution.theme" :content="solution.content"/>
    <div class="option-cards">
      <OperationCard v-for="item in cards"
                     :title="item.title"
                     :sub-title="item.subTitle"
                     :borderColor="item.borderColor"
                     :url="item.url"
                     :key="item.title"/>
    </div>
    <div class="option-bility">
      <MainTitle :title="'Our capability'" :sub-title="'我们的能力'"/>
    </div>
    <div>
      <List v-for="item in bilities"
            :title="item.title"
            :context="item.context"
            :url="item.url"
            :key="item.title"/>
    </div>

    <div class="option-bility">
      <MainTitle :title="'Core scenario'" :sub-title="'核心场景'"/>
    </div>

    <div class="scence-wrapper">
      <ScenceCard v-for="item in scences1"
                  :key="item.title"
                  :title="item.title"
                  :url="item.url" :bgColor="item.bg"
                  :border-color="item.border"/>
    </div>

    <div class="scence-wrapper" style="margin-bottom: 100px">
      <ScenceCard v-for="item in scences2"
                  :key="item.title"
                  :title="item.title"
                  :url="item.url" :bgColor="item.bg"
                  :border-color="item.border"/>
    </div>

    <ProductChart :title="'Product chart'"
                  :sub-title="'产品逻辑图'"
                  :img-width="'70%'"
                  :url="require('../assets/imgs/operation/product_chart.png')"/>
    <FooterView />
  </div>
</template>

<script>
  import BottomArrow from '../components/BottomArrow';
  import Solution from '../components/Solution';
  import OperationCard from '../components/OperationCard';
  import MainTitle from '../components/MainTitle';
  import List from '../components/List';
  import ScenceCard from '../components/ScenceCard';
  import ProductChart from '../components/ProductChart';
  import FooterView from '../components/FooterView';

  export default {
    name: 'SmartOperation',
    data() {
      return {
        solution: {
          titles: ['Smart', 'operation', 'solutions'],
          theme: {
            title: '智能运维解决方案',
            descrips: ['IT运维现代化 深化运维分析技能']
          },
          content:
            '在全面数智化时代下，企业亟待确保其IT系统的稳定性及安全性，智询通过数智化手段，极大提高了数据智能分析能力和运维场景丰富度等，帮助企业解决IT运维关键问题，提供IT运维现代化解决方案。'
        },
        cards: [
          {title: 'IT运维监控复杂', subTitle: '缺乏对IT全局深度洞察', url: require('../assets/imgs/operation/solution1.png'), borderColor: '#D8DE1F'},
          {title: '海量时间警告', subTitle: '故障发现排查难度大', url: require('../assets/imgs/operation/solution2.png'), borderColor: '#00D0FE'},
          {title: '事件安全审计', subTitle: '分析定位难', url: require('../assets/imgs/operation/solution3.png'), borderColor: '#FE6B16'}
        ],
        bilities: [
          {title: '监控平台整合能力', url: require('../assets/imgs/operation/bility1.png'), context: '随着云计算的应用、loT的发展，企业数据平台向多终端、多类型发展，囊括数据、设备甚至业务等信息，但却彼此孤立，智询拥有海量数据处理能力、强悍的数据平台和分析能力，对平台形成统一监控。'},
          {title: '数据提取和处理', url: require('../assets/imgs/operation/bility2.png'), context: '历史数据和流数据管理，包括对软件和应用的日志数据、网络数据、指标和文档数据的提取、索引和持久存储的管理，这就导致数据库中大部分是非结构化、多结构化的数据。智询可以实时呈现用户对数据感知的时间尺度，通过多个实时数据和历史数据流提供连贯分析功能。'},
          {title: '预测和分析结果', url: require('../assets/imgs/operation/bility3.png'), context: '使用上述多种类型的历史数据和流数据，生成关联性的数学模式或结构模式，推断系统运行情况，再利用这些模式及时预测不同事件出现的概率。除此之外，智询还可以根据模式和预测组件提出预警性信息及有效的解决方案。'}
        ],
        scences1: [
          {title: '性能分析', url: require('../assets/imgs/operation/core1.png'), bg: '#2525E9', border: '#06BCFD'},
          {title: '异常检测', url: require('../assets/imgs/operation/core2.png'), bg: '#033DFF', border: '#FBFE00'},
          {title: '事件关联分析', url: require('../assets/imgs/operation/core3.png'), bg: '#2525E9', border: '#B4FFF8'}
        ],
        scences2: [
          {title: 'IT服务管理', url: require('../assets/imgs/operation/core4.png'), bg: '#033DFF', border: '#00FF01'},
          {title: '自动化', url: require('../assets/imgs/operation/core5.png'), bg: '#2525E9', border: '#FCFF00'}
        ]
      };
    },
    components: {
      BottomArrow,
      Solution,
      OperationCard,
      MainTitle,
      List,
      ScenceCard,
      ProductChart,
      FooterView
    }
  };
</script>

<style lang="less">
  .smart-operation {
    position: relative;
  }
  .option-cards {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
  }

  .option-bility {
    margin-top: 100px;
    margin-bottom: 50px;
  }

  @media screen and (max-width: 768px) {
    .smart-operation {
      position: relative;
    }
    .option-cards {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin-top: 0;
    }

    .option-bility {
      margin-top: 50px;
      margin-bottom: 20px;
    }
  }
</style>
